<template>
	<view>
		<view class="box1">
			<view style="width: 90%; margin: auto;">
				<view style="float: left; margin-right: 70rpx"><text>我的订单</text></view>
				<view style="float: right; color: red;"><text>全部订单</text>
					<image src="../../static/images/more.png"></image>
				</view>
			</view>
		</view>
		<view class="box2">
			<view class="ruiss">
				<block v-for="(item,index) in arr" :key="index">
					<view class="ruis">
						<image :src="item.src"></image>
						<view>{{item.name}}</view>
					</view>
				</block>
			</view>
		</view>
		<view class="box3">
			<view class="ruid">
				<block v-for="(item,index) in pops" :key="index">
					<view class="ruid">
						<image :src="item.src"></image>
						<text style="padding-left: 15rpx;">{{item.name}}</text>
					</view>
				</block>
			</view>
		</view>

		<view class="mims">
			<view style="width: 90%; margin: auto;">
				<text style="float: left;">关于我们</text>
				<text style="float: right; color: #ccc;">></text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				arr: [{
						src: "../../static/images/order/fukuan.png",
						name: "待付款"
					},
					{
						src: "../../static/images/order/fahuo.png",
						name: "待发货"
					},
					{
						src: "../../static/images/order/shouhuo.png",
						name: "待收货"
					},
					{
						src: "../../static/images/order/pingjia.png",
						name: "待评价"
					},
					{
						src: "../../static/images/order/wancheng.png",
						name: "已完成"
					},
				],
				pops: [{
						src: "../../static/images/my-info/myquan.png",
						name: "我的优惠券"
					},
					{
						src: "../../static/images/my-info/tuikuan.png",
						name: "退款/售后"
					},
					{
						src: "../../static/images/my-info/dizhi.png",
						name: "收获地址"
					},
					{
						src: "../../static/images/my-info/kefu.png",
						name: "官方客服"
					},
					{
						src: "../../static/images/my-info/shezhi.png",
						name: "设置"
					},
				],
			}
		}
	}
</script>

<style>
	.box1 {
		height: 120rpx;
		width: 100%;
		border-bottom: 2rpx solid red;
		line-height: 120rpx;
	}

	.box1 image {
		width: 45rpx;
		height: 45rpx;
		vertical-align: middle;
	}
	
	.box3{
	    height: 620rpx;
	}

	.ruiss {
		display: flex;
		justify-content: space-around;
		text-align: center;
		font-size: 34rpx;
		padding-top: 30rpx;
		background-color: white;
	}

	.ruis image {
		width: 50rpx;
		height: 50rpx;

	}

	.ruid image {
		width: 50rpx;
		height: 50rpx;
		vertical-align: middle;

	}

	.ruid {
		height: 120rpx;
		width: 100%;
		line-height: 120rpx;
		border-bottom: 2rpx solid #ccc;
		padding-left: 15rpx;
	}

	.mims {
		height: 120rpx;
		line-height: 120rpx;
	}
</style>
